import React from 'react'
import { List,SwipeAction  } from 'weaver-mobile';
import { createForm } from 'rc-form';

const Item = List.Item;

class BasicInput extends React.Component {
    state = {
        value: 1,
    }

    componentDidMount(){
        
    }

    onSubmit = () => {
        this.props.form.validateFields({ force: true }, (error) => {
            if (!error) {
                console.log(this.props.form.getFieldsValue());
            } else {
                alert('Validation failed');
            }
        });
    }
    
    onReset = () => {
        this.props.form.resetFields();
    }

    validateAccount = (rule, value, callback) => {
        if (value && value.length > 4) {
            callback();
        } else {
            callback(new Error('At least four characters for account'));
        }
    }

    render() {
        const {title,subTitle,extra,info,hsaPic,arrow,detail,extraTag} = this.props;
        const { getFieldProps, getFieldError } = this.props.form;

        return (
            <List>
                <SwipeAction
                    style={{ backgroundColor: 'gray' }}
                    autoClose
                    right={[
                        {
                            text: '删除',
                            onPress: () => console.log('删除'),
                            style: { backgroundColor: '#F4333C', color: 'white' },
                        },
                    ]}
                >
                    <Item arrow={arrow}
                        thumb={hsaPic ? "https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png" : null}
                        multipleLine
                        onClick={(v) => {console.log('v',v)}} 
                        // content={(<InputItem placeholder="请输入" />)}
                        extra={extra}
                        className={'weaver-fna-list'}
                        // noBorder={true}
                    >
                        {title !== '' && <div className={'weaver-fna-list-title'}>
                            <span className={'weaver-fna-list-maintitle'}>{title}</span>
                            <span className={'weaver-fna-list-subtitle'}>{subTitle}</span>
                        </div>}
                        <Item.Brief>
                            {info}
                            <div dangerouslySetInnerHTML={{__html: detail}}></div>
                            {extraTag && <span className={'fna-extraTag'}>费用报销</span>}
                        </Item.Brief>
                        
                    </Item>
                </SwipeAction>
            </List>
        );
    }
}

const BasicInputWrapper = createForm()(BasicInput);
export default BasicInputWrapper;